<script>
import {getUserInfoAPI, loginOutAPI} from "@/apis/system/user";
import {getLeftMenusAPI} from "@/apis/system/menu";


export default {
    name: "Home",
    data() {
        return {
            // 用户信息
            userInfo: {},
            // 左侧菜单
            leftMenu: [],
            title: ''
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            /*获取个人信息*/
            getUserInfoAPI().then(res => {
                this.userInfo = res?.data
            })
            /*获取左侧菜单信息*/
            getLeftMenusAPI().then(res => {
                this.leftMenu = res?.data
            })

        },
        /*右上角菜单栏点击事件*/
        handleCommand(command) {
            switch (command) {
                case "info":
                    getUserInfoAPI().then(res => {
                        this.$router.push("/system/userInfo")
                    })
                    break;
                case "logout":
                    loginOutAPI().then(res => {
                        this.$message.success("退出登录成功")
                        sessionStorage.clear();
                        this.$router.push("/login")
                    })
            }
        },
        handleOpen(key, keyPath) {
            // this.$router.push()
            console.log(key, keyPath);
        },
        gotoPath(item) {
            this.$router.push(item.path)
            this.title = item.menuName
        },
        gotoHome() {
            this.$router.push('/main')
            this.title = ""
        }
    }
}
</script>

<template>
    <el-container>
        <el-header>
            <div class="logo">
                <img src="@/assets/logo.jpg" style="height: 100%;float: left;display: block"/>
                <h3 style="width: 65%;height: 100%;line-height: 60px;padding-left:10px;margin-top:0px; float: left;">
                    医院预约挂号系统</h3>
            </div>
            <div class="nav">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="head">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                     <el-avatar shape="circle" :src="userInfo?.picture"></el-avatar>
                      <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="logout">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside width="210px">
                <!--:router开启el-menu路由模式. 叶子菜单 index路由路径-->
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        :unique-opened="true"
                        @open="handleOpen"
                        :router="false">
                    <el-menu-item index="/welcome" @click="gotoHome">
                        <i class="el-icon-s-home"></i>
                        系统首页
                    </el-menu-item>
                    <el-submenu v-for="item in leftMenu" :index="item.menuId+''" :key="item.id">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{ item.menuName }}</span>
                        </template>
                        <el-menu-item v-for="child in item.children" :index="child.path" @click="gotoPath(child)"
                                      :key="child.id">
                            <i :class="child.icon"></i>
                            {{ child.menuName }}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>


<style scoped>
.el-container {
    height: 100%;
}

.el-header {
    background-color: #ffffff;
    color: black;
    line-height: 60px;

}

.el-header > .logo {
    width: 210px;
    height: 100%;
    float: left;
    margin-left: -20px;
}

.el-header > .nav {
    width: 20%;
    height: 100%;
    line-height: 60px;
    float: left;
}

.el-header > .head {
    width: 50%;
    height: 100%;
    float: right;
    text-align: right;
}

span.el-avatar.el-avatar--square {
    margin-top: 10px;
}

.el-breadcrumb {
    line-height: 60px;
}

.el-aside {
    height: 100%;
    background-color: #ffffff;
    color: black;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}

.el-main {
    background-color: #F8F8FF;
    color: #333;
    border-radius: 5px;
    height: 100%;

}

.el-card__body, .el-main {
    padding: 5px;
}


</style>